<style>
  [data-wrapper],
  body {
    margin: 16px 5px;
    border: 1px transparent solid;
  }
</style>
<h2>查找父元素：</h2>
<p>
<div>知道父元素找子元素很容易,直接querySelector就行了。在一堆列表中，如果知道某个item的子元素找item的根元素呢？</div>
<div>不断向上找就可以了！最佳方案，看console！</div>

</p>
<div data-wrapper>
  <button data-btn onclick="addRedBorder(event)">click add red border</button>
</div>
<div data-wrapper>
  <button data-btn onclick="addRedBorder(event)">click add red border</button>
</div>
<div data-wrapper>
  <button data-btn onclick="addRedBorder(event)">click add red border</button>
</div>

<script>
  function addRedBorder(e) {
    // 最佳方案：为什么要循环根元素，直接从子元素出发即可
    let div = e.target
    while (!div.hasAttribute('data-wrapper') && div !== document.body) div = div.parentElement

    if (div) {
      div.style.borderColor = 'red';
      setTimeout(() => {
        div.style.borderColor = 'transparent';
      }, 1200);
    }
  }

  console.log(`
    let div = e.target
    while(!div.hasAttribute('data-wrapper')&& div !== document.body) div=div.parentElement
    `)
</script>
<style>
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .card {
    outline: 1px solid aqua;
    width: 250px;
    height: 140px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .card i {
    display: inline-block;
    font-size: 10px;
    font-weight: normal;

    color: #312f21;
    background: white;
    font-family: revert;
    border-radius: 2px;
    padding: 2px 5px;
  }

  li {
    text-align: left !important;
  }

  .grab {
    cursor: grab;
    user-select: none;
  }

  .grab:active {
    cursor: grabbing;
  }

  /* ---------------------------- */
  .gtxt {
    font-family: sans-serif;
    font-size: 36px;
    font-weight: bold;

    color: transparent;
    background: linear-gradient(45deg, green 35%, red 50%, blue 75%);
    background-clip: text;
    -webkit-background-clip: text;
  }

  .bg2color {
    background: linear-gradient(15deg, red calc(50% - 2px), blue 50%);
  }

  .radialBg {
    /* background: radial-gradient(60px at 20px 40px, red, blue 50% calc(50% + 1px), yellow calc(100% - 2px), blue); */
    /* background: radial-gradient(at 20px 40px, red, blue 50% calc(50% + 1px), yellow calc(100% - 2px), blue); */
    /* background: radial-gradient(circle at 20px 40px, red, blue 50% calc(50% + 1px), yellow calc(100% - 2px), blue); */

    /* background: radial-gradient(circle, red, blue 50% calc(50% + 1px), yellow calc(100% - 2px), blue); */
    background: radial-gradient(red, blue 50% calc(50% + 1px), yellow calc(100% - 2px), blue);
  }
</style>
<h2>各种测试：</h2>
<div class="wrapper">
  <div class="card grab" title="">
    cursor: grab/grabbing效果 <br>

    <i>
      <ul>
        <li>初始是grab鼠标样式</li>
        <li>鼠标按住时就是:active，伪类中设置cursor为grabbing</li>
      </ul>
    </i>
  </div>
  <div class="card gtxt">
    渐变文字效果
    <i>
      <ul>
        <li>文字color要设置透明色;</li>
        <li>渐变背景并设置<span style="white-space: nowrap;">background-clip:text</span></li>
      </ul>
    </i>
  </div>
  <div class="card bg2color">
    <i style="margin-top: 30px;">技巧：这类背景，留2px渐变缝隙，防止出现锯齿</i>
  </div>
  <div class="card radialBg">
    <i>radial-gradient示例，F12切换样式！</i>
  </div>
  <div class="card cg2">
  </div>
  <div class="card cg3">
  </div>
  <div class="card">
  </div>
  <div class="card">
  </div>
</div>
<div style="height: 1em;"></div>
<i>tip: 每个item多行文字垂直居中，直接设置item flex布局，一个盒子就完成了！item内部无需额外的div</i>